import React, { Component } from 'react';
import {
  Text,
  View,
  FlatList,
  Image,
  StyleSheet,
  ActivityIndicator,
} from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  item: {
    width: 150,
    height: 150,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f0f',
  },
  // item:{
  //   flex:1,
  //   flexDirection:'column',
  //   alignItems:'center',
  //   justifyContent:'center'
  // }
  pic: {
    width: 100,
    height: 100,
    marginTop: 10,
  },
});

const RendItem = props => {
  const { title, url } = props;
  return (
    <View>
      <Image style={styles.pic} source={{ uri: url }} />
      <Text>{title}</Text>
    </View>
  );
};
export default class FlatListLearning extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
    };
  }

  componentDidMount = () => {
    fetch('http://api.douban.com/v2/movie/top250')
      .then(response => response.json())
      .then(data => {
        console.dir(data);
        this.setState({
          isLoading: false,
          data: data,
        });
      })
      .catch(error => {
        this.setState({
          isLoading: false,
        });
      });
  };

  render() {
    const { isLoading } = this.state;
    if (isLoading) {
      return (
        <View>
          <ActivityIndicator />
        </View>
      );
    }
    const {
      data: { subjects },
    } = this.state;
    console.dir(subjects[0].images.large);
    return (
      <FlatList
        numColumns={2}
        style={styles.container}
        data={subjects}
        renderItem={({
          item: {
            id,
            title,
            images: { large },
          },
        }) => {
          return (
            <RendItem style={styles.item} title={title + id} url={large} />
          );
        }}
        keyExtractor={({ id }) => id}
      />
    );
  }
}
